<template>

  <div>
    <el-dialog :model-value="visible" title="新增菜单" width="500" @close="cls">
      <el-form label-width="80" :rules="rules" :model="menu" ref="formRef">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="menu.category" @change="chg">
            <el-radio :value="1">一级菜单</el-radio>
            <el-radio :value="2">二级菜单</el-radio>
            <el-radio :value="3">三级菜单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menu.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>

        <el-form-item label="图标" v-show="menu.category==1">
          <el-input v-model="menu.icon" placeholder="请输入图标"></el-input>
        </el-form-item>

        <el-form-item label="路径" v-show="menu.category != 3" prop="path">
          <el-input v-model="menu.path" placeholder="请输入访问路径"></el-input>
        </el-form-item>

        <el-form-item label="路由名称" v-show="menu.category ==2">
          <el-input v-model="menu.name" placeholder="请输入路由名称"></el-input>
        </el-form-item>

        <el-form-item label="组件路径" v-show="menu.category == 2">
          <el-input v-model="menu.component" placeholder="请输入组件路径如:@/views/..."></el-input>
        </el-form-item>

        <el-form-item label="权限标识" v-show="menu.category == 3">
          <el-input v-model="menu.auth" placeholder="请输入权限标识如:sys:user:save"></el-input>
        </el-form-item>

        <el-form-item label="是否显示" v-show="menu.category == 2">
          <el-radio-group v-model="menu.showLink">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上级菜单" v-show="menu.category != 1" prop="parentId">
          <el-tree-select v-model="menu.parentId" :data="data" check-strictly :render-after-expand="false"
            :props="defaultProps" style="width: 240px" />
        </el-form-item>

        <el-form-item label="排序" v-show="menu.category != 3">
          <el-input-number v-model="menu.sorts" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="menu.status">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-button @click="save">保存</el-button>

    </el-dialog>

  </div>

</template>

<script setup>
import { ref,onMounted } from 'vue';
import { queryTree, saveMenu } from "@/api/sys/menu.js";
import { ElMessage } from "element-plus";
//属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default:false   
  }
})

//菜单对象
const menu = ref({
  category: 1,
  menuName: '',
  icon: "",
  path: "",
  sorts: 1,
  name: "",
  component: "",
  auth: "",
  showLink: 1,
  status:1,
  parentId: 0
})

//上级菜单
const data = ref([]);
const defaultProps = {
  children: "children",
  label: "menuName",
  value: "id"
};

//表单引用
const formRef =ref(null)

//验证路径
const validatePath = (rule, value, callback) => {
  if (menu.value.category != 2) {
    callback();
    return; //三级菜单  停止执行
  }

  if (value === "") {
    callback(new Error("请输入访问路径！"));
  } else {
    callback();
  }
};

//验证上级菜单
const validateParentId = (rule, value, callback) => {
  if (menu.value.category == 1) {
    menu.value.parentId = 0;
    callback();
    return; //一级菜单  停止执行
  }

  if (value === "" || value == 0) {
    callback(new Error("请输选择上级菜单！"));
  } else {
    callback();
  }
};

//验证规则
const rules = ref({
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  path: [{ validator: validatePath, trigger: "blur" }],
  parentId: [{ validator: validateParentId, trigger: "change" }]
});


//方法

//定义事件
const emit = defineEmits(["close", "refresh"])

//关闭事件
let cls = () => { 
  emit("close")
  emp()
}

//初始化上级菜单树
async function initTree() {
  let res = await queryTree();
  if (res.code == 200) {
    data.value = res.data;
  }
}

function chg(v) {
  if (v == 1) {
    menu.value.parentId = 0;
  } else {
    menu.value.parentId = "";
  }
}

//清空对象方法
let emp = () => {
  menu.value = {
    category: 1,
    menuName: '',
    icon: "",
    path: "",
    sorts: 1,
    name: "",
    component: "",
    auth: "",
    showLink: 1,
    parentId: 0
  }
}

//保存
let save = async () => {
  let valid = await formRef.value.validate(() => { })
  if (!valid)
    return;

  let res = await saveMenu(menu.value)
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件刷新数据
    emit("refresh");
    //关闭对话框
    cls();
    emp()
  }
  
}

onMounted(() => {
  initTree();
});

</script>

<style scope>
</style>